<!-- src/views/erp/product/ProductDetail.vue -->
<template>
	<Dialog title="产品详情" v-model="dialogVisible">
		<el-form :model="formData" label-width="100px" v-loading="formLoading">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="名称">
						<el-input v-model="formData.name" readonly />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="脑头类型">
						<el-input v-model="formData.headType" readonly />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="材质类型">
						<el-input v-model="formData.materialType" readonly />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="分类">
						<el-input v-model="formData.categoryName" readonly />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="单位">
						<el-input v-model="formData.unitName" readonly />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="状态">
						<el-input v-model="formData.statusName" readonly />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="规格">
						<el-input v-model="formData.standard" readonly />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="重量(kg)">
						<el-input v-model="formData.weight" readonly />
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="备注">
						<el-input type="textarea" v-model="formData.remark" readonly />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="dialogVisible = false">关 闭</el-button>
		</template>
	</Dialog>
</template>

<script setup lang="ts">
	import { ProductApi } from '@/api/erp/product/product'
	import { DICT_TYPE, getDictLabel } from '@/utils/dict'

	const dialogVisible = ref(false)
	const formLoading = ref(false)
	const formData = ref({
		id: undefined,
		name: '',
		headType: '',
		materialType: '',
		categoryName: '',
		unitName: '',
		status: '',
		statusName: '',
		standard: '',
		weight: 0,
		remark: ''
	})

	/** 打开弹窗 */
	const open = async (productId : number) => {
		dialogVisible.value = true
		formLoading.value = true
		try {
			const data = await ProductApi.getProductDetail(productId)
			formData.value = {
				...data,
				statusName: getDictLabel(DICT_TYPE.COMMON_STATUS, data.status),
				categoryName: data.categoryName || '',
				unitName: data.unitName || ''
			}
		} finally {
			formLoading.value = false
		}
	}

	defineExpose({ open })
</script>